<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">填写订单</block>
		</cu-custom>
		<addressView ref="addressView"></addressView>

		<view class="bg-white margin-lr margin-top">
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action"><text class=" text-bold text-lg">商品信息</text></view>
			</view>
			<view class="goods_list margin-lr" v-if="detail">
				<block v-for="(row,index) in detail.products" :key="index">
					<orderGoods :value="row"></orderGoods>
				</block>
			</view>
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">备注</view>
					<view class="action">
						<input class="text-right" placeholder="请输入备注" v-model="formData.buyer_message" />
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white margin-lr margin-top">
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">优惠劵</view>
					<view class="action ">
						<view v-if="detail && detail.coupons && detail.coupons.length > 0" class="text-red">
							<picker @change="bindCouponsPickerChange" :value="coupons_index" :range="detail.coupons" range-key="title">
								<view class="uni-input">{{detail.coupons[coupons_index]?detail.coupons[coupons_index].title:'请选择优惠券'}}</view>
							</picker>
						</view>
						<view v-else class="text-gray">暂无可用优惠券</view>
					</view>
				</view>
				<view class="cu-item" v-if="detail && detail.is_logistics == 1 && detail.pickup_point_config.buyer_self_lifting">
					<view class="content">配送方式</view>
					<view class="action text-red">
						<picker @change="bindLiftingPickerChange" :value="lifting_index" :range="lifting_rank" range-key="title">
							<view class="uni-input">{{lifting_rank[lifting_index]?lifting_rank[lifting_index].title:'未选择配送方式'}}</view>
						</picker>
					</view>
				</view>
				<view class="cu-item" v-if="detail && detail.is_logistics == 1 && detail.pickup_point_config.buyer_self_lifting && lifting_index==1">
					<view class="content">门店选择</view>
					<view class="action text-red">
						<picker @change="bindPickUpPickerChange" :value="pickup_index" :range="detail.pickup_point_config.list" range-key="name">
							<view class="uni-input" v-if="detail.pickup_point_config.list[pickup_index]">{{detail.pickup_point_config.list[pickup_index].name}}-{{detail.pickup_point_config.list[pickup_index].address_name}}
							</view>
						</picker>
					</view>
				</view>
				<view class="cu-item" v-if="detail && detail.is_logistics == 1 && detail.is_logistics && lifting_index==0">
					<view class="content">快递选择</view>
					<view class="action text-red">
						<picker @change="bindLogisticsPickerChange" :value="logistics_index" :range="detail.company" range-key="title">
							<view class="uni-input">{{detail.company[logistics_index]?detail.company[logistics_index].title:''}}</view>
						</picker>
					</view>
				</view>
				<view class="cu-item" v-if="detail && detail.order_is_invoice == 1">
					<view class="content">开具发票</view>
					<view class="action">
						<invoiceView ref="invoiceView"></invoiceView>
					</view>
				</view>
				<view class="cu-item" v-if="detail && detail.order_is_invoice == 1 && invoice_select">
					<view class="content">发票类型</view>
					<view class="action">
						<radio-group class="block" @change="InvoiceTypeRadioChange">
							<view class="cu-form-group margin-top">
								<radio :class="invoice_index==index?'checked':''" :checked="invoice_index==index?true:false" v-for="(item,index) in detail.invoice.list"
								 :key="index" :value="index+''">{{item}}</radio>
							</view>
						</radio-group>
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white margin-lr margin-top">
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">商品总额</view>
					<view class="action text-price text-red">{{productTotalMoney}}</view>
				</view>
				<view class="cu-item" v-if="couponsMoney>0">
					<view class="content">优惠金额</view>
					<view class="action  text-red">-<text class="text-price">{{couponsMoney}}</text></view>
				</view>
				<view class="cu-item" v-if="shippingMoney>0">
					<view class="content">快递费用</view>
					<view class="action text-price text-red">{{shippingMoney}}</view>
				</view>
				<view class="cu-item" v-if="detail && detail.order_is_invoice && invoiceTaxMoney>0">
					<view class="content">发票税费</view>
					<view class="action text-price text-red">{{invoiceTaxMoney}}</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar border shop foot">
			<view class="padding">
				实付款：<text class="text-price text-red">{{totalMoney}}</text>
			</view>
			<view class="submit" :class="'bg-'+theme" @tap="createOrder">提交订单</view>
		</view>

		<foot :value="''"></foot>
	</view>
</template>

<script>
	import Foot from '@/components/default/foot.vue'
	import orderGoods from '@/components/shop/orderGoods.vue'
	import addressView from '@/components/shop/addressView.vue'
	import invoiceView from '@/components/shop/invoiceView.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			orderGoods,
			addressView,
			invoiceView,
			Foot
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				detail: null,
				coupons_index: null, //优惠券选择
				lifting_index: 0, //配送选择
				pickup_index: 0, //自提选择
				logistics_index: 0, //快递选择
				invoice_index: 0, //发票类型
				lifting_rank: [{
						id: 1,
						title: '物流配送'
					},
					{
						id: 2,
						title: '买家自提'
					},
				],
				productTotalMoney: 0, //商品总额
				couponsMoney: 0, //优惠金额
				shippingMoney: 0, //运费
				invoiceTaxMoney: 0, //税费
				totalMoney: 0,
				formData: {
					is_channel: 1,
					address_id: 0,
					// coupon_id: 0,
					buyer_message: '',
					// company_id: 0,
					data: null,
					// pickup_id: 0,
					shipping_type: 1,
					type: '',
				},
				invoice_select: null,
				loading: false,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
			}
		},
		onLoad(options) {
			this.formData.type = options.type
			this.formData.data = options.data
			if (!options.data) {
				this.$common.showErrorModal('商品信息有误')
				return
			}
			this.getPreview()
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				var address_select = this.$common.getCache('address_select')
				if (address_select) {
					this.$nextTick((r) => {
						this.$refs.addressView.setAddress(address_select)
						this.$common.rmCache('address_select')
					})
				}
				var invoice_select = this.$common.getCache('invoice_select')
				if (invoice_select) {
					this.$nextTick((r) => {
						this.$common.rmCache('invoice_select')
						this.$refs.invoiceView.setInvoice(invoice_select)
						this.invoice_select = invoice_select
						this.mathInvoiceTaxMoney()
					})
				}
			}
		},
		methods: {
			getPreview() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.get('order_preview', {
						type: this.formData.type,
						data: this.formData.data,
						is_channel: this.formData.is_channel
					})
					.then((response) => {
						this.detail = response.data.data
						if (this.detail.address) {
							this.$refs.addressView.setAddress(this.detail.address)
						}
						this.$common.rmCache('cart_num')
						this.mathTotalProductMoney()
						this.mathShippingMoney()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			bindCouponsPickerChange(e) {
				this.coupons_index = e.detail.value
				this.couponsMoney = this.detail.coupons[this.coupons_index].money
				this.mathShippingMoney()
				console.log(this.couponsMoney)
			},
			bindLiftingPickerChange(e) {
				this.lifting_index = e.detail.value
				this.mathShippingMoney()
			},
			bindPickUpPickerChange(e) {
				this.pickup_index = e.detail.value
			},
			bindLogisticsPickerChange(e) {
				this.logistics_index = e.detail.value
			},
			InvoiceTypeRadioChange(e) {
				this.invoice_index = e.detail.value
				this.mathInvoiceTaxMoney()
			},
			mathTotalProductMoney() {
				let productTotalMoney = 0
				for (let i in this.detail.products) {
					productTotalMoney += this.detail.products[i].product_money * this.detail.products[i].num
				}
				this.productTotalMoney = productTotalMoney.toFixed(2)
				this.mathTotalMoney()
			},
			mathShippingMoney() {
				if (this.lifting_index == 0)
					this.shippingMoney = this.detail.preview.shipping_money
				else this.shippingMoney = 0
				this.mathTotalMoney()
			},
			mathInvoiceTaxMoney() {
				let invoiceTaxMoney = this.detail.invoice.order_invoice_tax * this.productTotalMoney / 100
				this.invoiceTaxMoney = invoiceTaxMoney.toFixed(2)
				this.mathTotalMoney()
			},
			mathTotalMoney() {
				this.totalMoney = (parseFloat(this.productTotalMoney) + parseFloat(this.shippingMoney) + parseFloat(this.invoiceTaxMoney) -
					parseFloat(this.couponsMoney)).toFixed(
					2)
			},
			createOrder() {
				if (this.loading) return
				let address = this.$refs.addressView.getAddress()
				if (!address) {
					this.$common.showError('请选择收货地址')
					return
				}
				this.formData.address_id = address.id

				if (this.coupons_index != null && this.coupons_index >= 0) {
					this.formData.coupon_id = this.detail.coupons[this.coupons_index].id
				}
				if (this.detail.is_logistics == 1) {
					if (this.lifting_index >= 0) {
						this.formData.shipping_type = this.lifting_rank[this.lifting_index].id
					}
					if (this.formData.shipping_type == 1) {
						if (this.logistics_index)
							this.formData.company_id = this.detail.company[this.logistics_index].id
						else if (this.detail.pickup_point_config.buyer_self_lifting) {
							this.$common.showError('请选择物流方式')
							return
						}
					} else {
						if (this.pickup_index >= 0) {
							this.formData.pickup_id = this.detail.pickup_point_config.list[this.pickup_index].id
						} else {
							this.$common.showError('请选择自提的门店')
							return
						}
					}
				}
				if (this.detail.order_is_invoice && this.invoice_select) {
					this.formData.invoice_id = this.invoice_select.id
					this.formData.invoice_content = this.detail.invoice.list[this.invoice_index]
				}
				console.log(this.formData)
				this.loading = true
				uni.showLoading({
					title: '提交中...'
				})
				this.$http
					.post('order_create', this.formData)
					.then((response) => {
						this.loading = false
						uni.hideLoading()
						var order_id = response.data.data.id
						this.$common.showSuccess('提交成功', function() {
							uni.redirectTo({
								url: "/pages/member/wallet/pay?id=" + order_id
							})
						})
					})
					.catch((response) => {
						this.loading = false
						console.log(response)
						uni.hideLoading()
					})
			},
		}
	}
</script>

<style>
</style>
